/* components */
import { SettingGPTViewTable } from '@src/modules/setting/gpt/components'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { 
  SettingGPTChatTypeCNNmaeEnum,
  SettingGPTChatTypeEnum,
  SettingGPTQuestionTypeCNNmaeEnum, 
  SettingGPTQuestionTypeEnum, 
  SettingGPTStatusCNNmaeEnum, 
  SettingGPTStatusEnum
} from '@src/modules/setting/gpt/model'
/* vue */
import { defineComponent, PropType } from 'vue'
import { isFalsy } from '@src/util/type'

enum SettingGPTQuestionViewOperateEventEnum {
  ChangeKeyword = 'changeKeyword',
  BatchDelete = 'batchDelete',
  Create = 'create'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTQuestionViewOperate,
  props: {
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    keyword: {
      type: String as PropType<string>,
      default: ''
    },
    isShowDelete: {
      type: Boolean,
      default: false
    },
    isLikeActive: {
      type: Boolean,
      default: false
    },
    isLogActive: {
      type: Boolean,
      default: false
    },
    isStandardActive: {
      type: Boolean,
      default: false
    },
    isShowStandardOperate: {
      type: Boolean,
      default: false
    },
    onChangeKeyword: {
      type: Function
    },
    onBatchDelete: {
      type: Function
    },
    onCreate: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
  },
  computed: {
    isNotStandardActive(): boolean {
      return isFalsy(this.isStandardActive) && isFalsy(this.isLogActive)
    }
  },
  methods: {
    onKeywordChangeHandler(value: string) {
      this.$emit(SettingGPTQuestionViewOperateEventEnum.ChangeKeyword, value)
    },
    onBatchDeleteHandler() {
      this.$emit(SettingGPTQuestionViewOperateEventEnum.BatchDelete)
    },
    onCreateHandler() {
      this.$emit(SettingGPTQuestionViewOperateEventEnum.Create)
    },
    renderStandardOperate() {
      
      if (isFalsy(this.isShowStandardOperate)) {
        return
      }
      
      return (
        <el-button
          class="setting-gpt-question-view-operate-create-button"
          type="primary"
          disabled={this.disabled}
          onClick={this.onCreateHandler}
        >
          新建百科
        </el-button>
      )
    },
    renderStandardOperateTip() {
      return (
        <div class="setting-gpt-question-view-operate-tip">
          <i class="iconfont icon-info"></i>
          <span>
            小宝AI机器人会优先使用百科进行回答。
          </span>
        </div>
      )
    },
    renderOtherOperateTip() {
      return (
        <div class="setting-gpt-question-view-operate-tip">
          <i class="iconfont icon-info"></i>
          <span>
            问题列表会收集用户反馈的问题，包括点赞问题、点踩问题、未知问题
          </span>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTQuestionViewOperate}>
        
        <div class="setting-gpt-question-view-operate-left">
          
          {this.isStandardActive && this.renderStandardOperate()}
          
          {this.isShowDelete && (
            <el-button
              class="setting-gpt-question-view-operate-delete"
              type="plain-third"
              disabled={this.disabled}
              onClick={this.onBatchDeleteHandler}
            >
              批量删除
            </el-button>
          )}
          
          {this.isStandardActive && this.renderStandardOperateTip()}
          
          {this.isNotStandardActive && this.renderOtherOperateTip()}
          
        </div>
        
        <div class="setting-gpt-question-view-operate-input">
          <el-input
            placeholder="搜索问题"
            prefix-icon="el-icon-search"
            clearable
            value={this.keyword}
            maxlength={600}
            onInput={this.onKeywordChangeHandler}
          >
          </el-input>
        </div>
        
      </div>
    )
  }
})